<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <com></com>
    <hr>
    <com inline-template>
        <p>内联模板</p>
    </com>
    <hr>
    <another-com></another-com>
</div>

<!--如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板编写起来更灵活。-->
<!--分发内容 表示slot那种语法-->
<script type="text/x-template" id="hello">
    <p>另一种定义模板的方式</p>
</script>
<script>
    new Vue({
        el: "#app",
        components: {
            Com: {
                template: '<p>模板内容</p>'
            },
            AnotherCom: {
                template: '#hello'
            }
        }
    })

</script>



</body>
</html>